<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//1在页面加载完成时通过c1获取所有的二层ul并且遍历,让其隐藏。
	onload = function(){
		var uls = document.getElementsByClassName("c1");
		for(var i = 0;i<uls.length;i++){
			uls[i].style.display = "none";
		}
	}
	//2实现myfn方法  方法有参数li
	//3通过li获取里面的ul
	//4通过三目 如果ul隐藏则显示否则隐藏
	function myfn(li){
	var ul = li.getElementsByTagName("ul")[0];
	ul.style.display = ul.style.display=="none"?"block":"none";
	//5再次通过c1获取所有的二层ul,并且遍历 判断出不是当前点击的ul 让其隐藏
	var uls = document.getElementsByClassName("c1");
	for(var i = 0;i<uls.length;i++){
		if(uls[i]!=ul){
			uls[i].style.display="none";
		}
	}
}
	
</script>
</head>
<body>
<ul>
	<li onclick="myfn(this)">工作好友
		<ul class="c1">
			<li>马云</li>
			<li>马化腾</li>
			<li>王健林</li>
		</ul>
	</li>
	<li onclick="myfn(this)">亲朋好友
		<ul class="c1">
			<li>习大大</li>
			<li>李克强</li>
			<li>栗战书</li>
		</ul>
	</li>
	<li onclick="myfn(this)">前女友们
		<ul class="c1">
			<li>范冰冰</li>
			<li>Angelababy</li>
			<li>赵丽颖</li>
		</ul>
	</li>
</ul>
</body>
</html>